<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Magic-Bear-字典控制台</title>
    <link href="https://cdn.staticfile.org/layui/2.7.6/css/layui.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        body {
            padding: 35px 35px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" id="toolbarDemo">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">字典类型：</label>
            <div class="layui-input-inline">
                <input type="text" id="dictType" name="dictType" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">字典名称：</label>
            <div class="layui-input-inline">
                <input type="text" id="dictTypeName" name="dictTypeName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">appId：</label>
            <div class="layui-input-inline">
                <input type="text" id="appId" name="appId" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-normal" data-type="reload" lay-filter="data-search-btn" id="search_btn">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<table class="layui-hide" id="dictTable" lay-filter="test"></table>
<div class="layui-tab-item">
    <div id="pageDemo"></div>
</div>

<script>
    layui.use(['table', 'form'], function () {
        // 得到需要的内置组件
        var layer = layui.layer; //弹层
        var laypage = layui.laypage; //分页
        var table = layui.table; //表格


        // 执行一个 table 实例
        table.render({
            elem: '#dictTable'
            , height: 800
            , url: '/magic/bear/dictType/pageList'
            , title: '字典表'
            , method: 'post'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'dictTypeId', title: 'ID', width: 50}
                    , {field: 'dictType', title: '字典类型', width: 260}
                    , {field: 'dictTypeName', title: '字典名称', width: 260}
                    , {field: 'appId', title: 'appId', width: 200}
                    , {field: 'remark', title: '备注', width: 300}
                    , {field: 'creator', title: '创建者', width: 150}
                    , {field: 'createTime', title: '创建时间', width: 160}
                    , {field: 'modifier', title: '更新者', width: 150}
                    , {field: 'modifyTime', title: '更新时间', width: 160}
                ]
            ]
            , parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.records, //解析数据列表
                    "count": res.data.total
                };
            },
        });


        $(document).on('click', '#search_btn', function (data) {
            table.reload('dictTable', {
                where: {
                    dictType: $('#dictType').val(),
                    dictTypeName: $('#dictTypeName').val(),
                    appId: $('#appId').val()
                },
                page: {
                    curr: 1
                }
            });

        });


        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].dictTypeId);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });


        // 分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 1000 //数据总数
            , limit: 10 //每页显示的数据条数
            , skin: '#1E9FFF' //自定义选中色值
            //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });


    });
</script>
</body>
</html>
